<template>
  <view class="flex-col">
    <view class="page-wrap" :class="'bottom115'">
      <uni-forms ref="ruleForm" :value="ruleForm" :rules="rules" labelWidth="auto" :labelPosition="'top'">

        <uni-forms-item :required="true" name="carNo" label="车牌号:">
          <text class="carNo" />
          <uni-easyinput v-if="boole" type="text" v-model="ruleForm.carNo"
                         @clear="handleClear"
                         @blur="handleBlur(ruleForm.carNo)"
            placeholder="请输入车牌号" />
          <zxz-uni-data-select v-else @change="handleChange" v-model="ruleForm.carNo" dataKey="carNo" dataValue="carId"
            filterable ref="refZxzUniDataSelect" :localdata="vinList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item :required="true" name="vinNo" label="车架号:">
          <text class="carNo" />
          <uni-easyinput disabled type="text" v-model="ruleForm.vinNo" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item :required="true" name="brandName" label="品牌:">
          <text class="brandName" />
          <uni-easyinput disabled type="text" v-model="ruleForm.brandName" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item :required="true" name="seriesName" label="车型:">
          <text class="seriesName" />
          <uni-easyinput disabled type="text" v-model="ruleForm.seriesName" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item :required="true" name="modelName" label="车款:">
          <text class="modelName" />
          <uni-easyinput disabled type="text" v-model="ruleForm.modelName" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item :required="true" name="propertyRightName" label="车辆产权:">
          <text class="propertyRightName" />
          <uni-easyinput disabled type="text" v-model="ruleForm.propertyRightName" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item label="出险日期:" name="accidentTime" :required="true">
          <text class="accidentTime" />
          <uni-datetime-picker type="date" placeholder="请选择出险日期" :disabled="ruleForm.carId === null" @change="handleTime"
            return-type="string" v-model="ruleForm.accidentTime" />
        </uni-forms-item>

        <uni-forms-item name="syxPolicyCode" label="商业险保单号:" required>
          <text class="syxPolicyCode" />
          <uni-easyinput disabled type="text" v-model="ruleForm.syxPolicyCode" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item name="jqxPolicyCode" label="交强险保单号:" required>
          <text class="jqxPolicyCode" />
          <uni-easyinput disabled type="text" v-model="ruleForm.jqxPolicyCode" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

        <uni-forms-item name="insuredName" label="被保险人:">
          <uni-easyinput disabled type="text" v-model="ruleForm.insuredName" placeholder="系统根据车牌号自动获取" />
        </uni-forms-item>

      </uni-forms>
    </view>

    <view class="button-container">
      <button class="btn-item" @click="submit">提 交</button>
    </view>
  </view>
</template>

<script>
import {
  getAddSettlementDetails,
  submitAddSettlements,
  getInsuranceTime,
} from "@/api/insuranceSettlement";

export default {
  name: "addSettlement", //新增保险理赔
  computed: {},
  watch: {
    vinList: {
      handler(val) {
        if (val && val.length === 0) {
          this.boole = true;
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      ruleForm: {
        carNo: "",
        vinNo: "",
        propertyRightName: "",
        accidentTime: "",
        syxPolicyCode: "",
        jqxPolicyCode: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        carId: null,
        insuredName: "",
      },
      vinList: [],
      boole: true,
      rules: {
        carNo: {
          rules: [
            { required: true, errorMessage: "车牌号", validateTrigger: "blur" },
          ],
        },
        vinNo: {
          rules: [
            { required: true, errorMessage: "车架号", validateTrigger: "blur" },
          ],
        },
        brandName: {
          rules: [
            { required: true, errorMessage: "品牌", validateTrigger: "blur" },
          ],
        },
        seriesName: {
          rules: [
            { required: true, errorMessage: "车型", validateTrigger: "blur" },
          ],
        },
        modelName: {
          rules: [
            { required: true, errorMessage: "车款", validateTrigger: "blur" },
          ],
        },
        propertyRightName: {
          rules: [
            {
              required: true,
              errorMessage: "车辆产权",
              validateTrigger: "blur",
            },
          ],
        },
        accidentTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择出险日期",
              validateTrigger: "bind",
            },
          ],
        },
        syxPolicyCode: {
          rules: [
            {
              required: true,
              errorMessage: "商业险保单号",
              validateTrigger: "blur",
            },
          ],
        },
        jqxPolicyCode: {
          rules: [
            {
              required: true,
              errorMessage: "交强险保单号",
              validateTrigger: "blur",
            },
          ],
        },
      },
    };
  },
  onLoad(op) {},
  created() {},
  mounted() {},
  methods: {
    handleClear(){
      this.ruleForm = {
        carNo: "",
            vinNo: "",
            propertyRightName: "",
            accidentTime: "",
            syxPolicyCode: "",
            jqxPolicyCode: "",
            modelName: "",
            seriesName: "",
            brandName: "",
            carId: null,
            insuredName: "",
      }
    },

    async handleBlur(val) {
      try {
        if (!val) return;
        const res = await getAddSettlementDetails(val);
        this.vinList = res.data;
        this.boole = false;
        if (this.vinList.length > 0) {
          this.$nextTick(() => {
            this.$refs.refZxzUniDataSelect.showSelector = true;
          });
        }
      } catch (e) {
        console.error(e);
      }
    },

    handleChange(val) {
      if (val) {
        this.boole = true;
        this.$set(this.ruleForm,'carNo',val.carNo)
        this.$set(this.ruleForm,'vinNo',val.vinNo)
        this.$set(this.ruleForm,'modelName',val.modelName)
        this.$set(this.ruleForm,'seriesName',val.seriesName)
        this.$set(this.ruleForm,'brandName',val.brandName)
        this.$set(this.ruleForm,'propertyRightName',val.propertyRightName)
        this.$set(this.ruleForm,'carId',val.carId)
      } else {
        this.boole = false;
      }
    },

    handleTime(val) {
      if (val) {
        let obj = {
          settlementDate: val,
          carId: this.ruleForm.carId,
        };
        this.validateTime(obj);
      }
    },

    validateTime(obj) {
      return getInsuranceTime(obj).then((res) => {
        if (res) {
          this.ruleForm.jqxPolicyCode = res.jqxPolicyCode;
          this.ruleForm.syxPolicyCode = res.syxPolicyCode;
          this.ruleForm.insuredName = res.insuredName;
        } else {
          this.ruleForm.accidentTime = "";
          this.rules.accidentTime.rules = [
            {
              required: true,
              errorMessage: "出险日期不正确",
              validateTrigger: "bind",
            },
          ];
          this.$nextTick((_) => {
            this.$refs.ruleForm
              .validateField(["accidentTime"])
              .then((res) => {})
              .catch((err) => {});
          });
        }
      });
    },

    async submit() {
      try {
        await this.handleEffect();
        uni.showLoading();
        let url = `/pages/CarPage/insuranceSettlement/add?jqxPolicyCode=${
          this.ruleForm.jqxPolicyCode
        }&syxPolicyCode=${this.ruleForm.syxPolicyCode}
            &accidentTime=${this.ruleForm.accidentTime}&carNo=${
          this.ruleForm.carNo
        }&insuredName=${this.ruleForm.insuredName}&type=edit`;
        let res = await submitAddSettlements(this.ruleForm);
        if (res.code === 200) {
          setTimeout(() => {
            this.$tab.navigateTo(url)
          }, 1000);
        }
      } catch (err) {
        let key = "." + err[0].key;
        this.$nextTick(() => {
          uni.pageScrollTo({ selector: key });
        });
      } finally {
        setTimeout(() => {
          uni.hideLoading();
        }, 1000);
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
          .validate()
          .then((res) => {
            resolve();
          })
          .catch((err) => {
            let key = "." + err[0].key;
            reject(key);
          });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


